<template>
<div>
  <h1>优惠券</h1>
  <a href="/newlist">返回</a>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="优惠券">
      <el-input v-model="formInline.name" placeholder="优惠券"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-date-picker
          v-model="formInline.createTimes"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="list">查询</el-button>

    </el-form-item>
  </el-form>
  <el-row>
    <el-col :span="8" v-for="u in tableData" :key="u.id">
      <el-card :body-style="{ padding: '0px' }">
       <img :src="u.image" style="width: 120px;height: 120px;">
        <div style="padding: 14px;">
         名称:<span>{{u.name}}</span><br>
          类型:<span>{{u.nameType}}</span><br>
          发行数量:<span>{{u.quantity}}</span><br>
          <span>状态:{{u.status==0?'可使用':'已过期'}}</span><br>
          <div class="bottom clearfix">
            <time class="time">创建时间:{{u.createTime}}</time>
            <el-button type="text" class="button" @click="getById(u)">详情</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-pagination
      @current-change="toPage"
      :current-page="page"
      :page-size="size"
      layout="total, prev, pager, next"
      :total="total">
  </el-pagination>
<!--  <el-dialog title="添加优惠券" :visible.sync="dialogFormVisible">-->
<!--    <el-form :model="form">-->
<!--      <el-form-item label="优惠卷名称" :label-width="formLabelWidth">-->
<!--        <el-input v-model="form.name" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->
<!--       <el-form-item label="图片" :label-width="formLabelWidth">-->
<!--         <el-upload-->
<!--             class="avatar-uploader"-->
<!--             action="http://127.0.0.1:10020/coupon/upload"-->
<!--             :show-file-list="false"-->
<!--             :on-success="handleAvatarSuccess"-->
<!--             :before-upload="beforeAvatarUpload">-->
<!--           <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
<!--           <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--         </el-upload>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="优惠卷类型" :label-width="formLabelWidth">-->
<!--        <el-select v-model="form.typeId" placeholder="请选择类型">-->
<!--          <el-option-->
<!--              v-for="item in typeData"-->
<!--              :key="item.id"-->
<!--              :label="item.name"-->
<!--              :value="item.id">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="价格" :label-width="formLabelWidth">-->
<!--        <el-input v-model="form.price" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="状态" :label-width="formLabelWidth">-->
<!--        <el-radio v-model="form.status" label="0">可使用</el-radio>-->
<!--        <el-radio v-model="form.status" label="1">已过期</el-radio>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="开始时间" :label-width="formLabelWidth">-->
<!--        <el-date-picker-->
<!--            v-model="form.startDate"-->
<!--            type="date"-->
<!--            placeholder="选择日期">-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="结束时间" :label-width="formLabelWidth">-->
<!--        <el-date-picker-->
<!--            v-model="form.endDate"-->
<!--            type="date"-->
<!--            placeholder="选择日期">-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="消费限制" :label-width="formLabelWidth">-->
<!--        <el-input v-model="form.minChase" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="发出数量" :label-width="formLabelWidth">-->
<!--        <el-input v-model="form.quantity" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="备注" :label-width="formLabelWidth">-->
<!--        <el-input v-model="form.notes" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
<!--    <div slot="footer" class="dialog-footer">-->
<!--      <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--      <el-button type="primary" @click="add">确 定</el-button>-->
<!--    </div>-->
<!--  </el-dialog>-->
</div>
</template>

<script>
export default {
  name: "CouponView",
  data(){
    return{
      typeData:[],
      imageUrl:'',
      form:{},
      dialogFormVisible:false,
      formLabelWidth:'120px',
      formInline:{},
      tableData:[],
      page:1,
      size:3,
      total:0
    }
  },methods:{
    getById(u){
    sessionStorage.setItem("id",u.id)
      this.$router.push("details")
    },
    type(){
      this.axios.post("/coupon/typeList").then(res=>{
        this.typeData = res.data.data;
      })
    },
    add() {
      this.axios.post("/coupon/save", this.form).then(res => {
        if (res.data.code == 200) {
          this.$message.success("添加成功");
          this.dialogFormVisible = false;
        } else {
          this.$message.error(res.data.msg);
        }
      })

    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.image=res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    toadd(){
      this.dialogFormVisible=true;
    },
    toPage(val){
      this.page=val;
      this.list();
    },
    list() {
      this.axios.post("/coupon/list?pageNum=" + this.page + "&pageSize=" + this.size, this.formInline).then(res => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
  },created() {
    this.list();

    this.type();
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
